<template>
  <div id="app">
    <vue-particles
      color="#555"
      :particleOpacity="0.6"
      :particlesNumber="70"
      shapeType="circle"
      :particleSize="2"
      linesColor="#555"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>
    <div class="login-box">
      <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
      <el-form
        :rules="loginFormRules"
        ref="loginForm"
        :model="loginForm"
        label-position="right"
        label-width="auto"
        show-message
      >
        <el-button
          icon="el-icon-close"
          class="close"
          @click="close"
          circle
        ></el-button>
        <span class="login-title">登陆</span>
        <div style="margin-top: 5px"></div>
        <el-form-item label="用户名" prop="username">
          <el-col :span="22">
            <el-input type="text" v-model="loginForm.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="22">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="6"
            ><el-button type="primary" @click="login">登录</el-button></el-col
          >
          <el-col :span="12"
            ><el-button type="primary" @click="toRegiste"
              >注册</el-button
            ></el-col
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      loginFormRules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    toRegiste() {
      this.$router.push({ path: "/registe" });
    },
    login() {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginForm);
        console.log(res);
        window.sessionStorage["token"] = res.data;
        window.sessionStorage["username"] = this.loginForm.username;
        const token = window.sessionStorage["token"];
        console.log(token);
        if (res.code !== 200) {
          this.$message.error(res.msg);
        } else {
          this.$message.success("登陆成功");
          this.$router.push({ path: "/index" });
        }
      });
    },
    // 关闭按钮
    close() {
      this.$router.push({ path: "/index" });
    },
  },
};
</script>
<style scoped>
.close {
  float: right;
  transform: translate(-120px, -20px);
  background: rgba(235, 232, 232 0.9);
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 15% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px black;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: black;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  left: 42%;
}
.lizi {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
}
el-form-item {
  height: 100px;
}
</style>